<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue.js"></script>
  <style>
    .title{
      color: blue;
    }
    .size{
      font-size: 50px;
    }
  </style>
</head>

<body>
  <div id="app">

   <!-- <h1 class="static" :class="{title:isShow,size:true}">太原2001</h1> -->
   <h1 class="static" :class="classObj">太原2001</h1>

   <div :class="[wrapperClass]">
     我是一个容器
   </div>

   <button-counter class="counterWrapper"></button-counter>

   <h1 :style="{color:colorValue,fontSize:size}">helloworld</h1>

  </div>


  <script>

    //全局组件
    Vue.component('ButtonCounter', {
      props: ['num'],
     
      data() {
        return {
          count: this.num
        }
      },
      template: `
      <div class="com">
       <h1>计数器组件</h1>
      <hr/>
    </div>
`
    })

    var vm = new Vue({
      el: '#app',
      data: {
        colorValue:'red',
        size:'50px',
        isShow: true,
        classObj:{
          title:true,
          size:true
        },
        wrapperClass:'wrapper'
      }
    })


  </script>


</body>

</html>